import React, { Children, useEffect, useState } from 'react'
import lou from '../../assets/css/louyu.module.css'
import axios from 'axios';
import { Table, Button, Modal } from 'antd'
import { Pagination, Image, message,Popover, Steps ,Input,theme, Drawer, Radio,Space,Tabs} from 'antd';
import { FormOutlined, DeleteOutlined, LeftCircleFilled, FacebookFilled } from '@ant-design/icons';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch } from 'antd';
import { Upload } from 'antd';

const dataSource = [];
const steps = [
  {
    title: '基础信息',
    content: 'First-content',
  },
  {
    title: '楼宇图片',
    content: 'Second-content',
  },
  {
    title: '楼层',
    content: 'Last-content',
  },
];


export default function Louyu() {
  let [dataSource, setDataSource] = useState([])
  let [isdelopen, setIsdelopen] = useState(false)
  let [list, setList] = useState([])
  let [searchText,setSearchText]=useState('') //新增搜索文本状态
  let [dd,setDd]=useState(0)
  let [ee,setEe]=useState(0)
  let [ff,setFf]=useState(0)
  let [op,setOp]=useState('')
  let [previewImage,setPreviewImage]=useState('')
  const aboveLook = Array.from({ length: ee }, (_, index) => ` ${index + 1}`);
  const above = Array.from({ length: ff}, (_, index) => ` ${index + 1}`);
  let getData = (p) => {
    if (searchText) { // 只有当搜索文本不为空时才发送请求
      axios.get('/api/getKhList', {
        params: {
          searchText: searchText // 将搜索文本作为参数传递
        }
      }).then(res => {
        console.log(res);
        setDataSource([...res.data])
      })
    }
  }
  // const getAll = (params) => axios.get('http://172.16.17.106:8080/build/getAll', {
  //   params:{
  //    ...params
  //  }
  //   })
  useEffect(() => {
    // getAll().then(res=>{
    //   console.log(res);
    //   setDataSource([...res.data.data])
    // })
    getData(1)
  }, [])
  const columns = [
    {
      title: '名称',
      dataIndex: 'img',
      key: 'img',
      align: 'center',
      render: (_, row) => {
        // console.log(_, row);
        return (
          <div className={lou.lastname}>
            <Image src={_} width={45} height={60} className={lou.img1} />
            <span>{row.name}</span>
          </div>
        )
      }
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      key: 'address',
      align: 'center',
    },

    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (item, row) => {
        return (
          <div>
            <Button shape='default' icon={<FormOutlined />} style={{ border: 'none', color: '#8674ea' }} onClick={()=>{
                setOpen(true)
                // setEditData(row)//设置编辑数据
                console.log(row);
                
                setOp(row)
            }}/>
            <Button icon={<DeleteOutlined />} style={{ border: 'none', color: '#f86161' }} onClick={() => {
              setIsdelopen(true)
              // console.log(item.id);
              setList(dataSource.filter(item => {
                if (item.id != row.id) {
                  return item
                }
              }))

            }} />
          </div>
        )
      }
    }
  ];
  // 全局提示成功
  const [messageApi, contextHolder] = message.useMessage();
  const success = () => {
    messageApi.open({
      type: 'success',
      content: 'This is a success message',
    });
  };
  // 新建楼宇
  const [newOpen, setNewOpen] = useState(false);
  const { token } = theme.useToken();
  const [current, setCurrent] = useState(0);
  const next = () => {
    setCurrent(current + 1);
  };
  const prev = () => {
    setCurrent(current - 1);
  };
  const items = steps.map((item) => ({
    key: item.title,
    title: item.title,
  }));
  const contentStyle = {
    lineHeight: '260px',
    textAlign: 'center',
    color: token.colorTextTertiary,
    backgroundColor: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: `1px dashed ${token.colorBorder}`,
    marginTop: 16,
  };
  // 抽屉
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState('right');
  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };
  const onChange = (e) => {
    setPlacement(e.target.value);
  };
  // tab
  const onChange2 = (key) => {
    console.log(key);
  };
  // 重置函数
  const reset =()=>{
    setSearchText('') //清空搜索文本
    getData(1) //重新获取数据
  }


  const handlePreview = async (file) => {
    setPreviewImage(file.url || file.preview);
   setPreviewOpen(true);
    };
    const handleChange = ({ fileList: newFileList }) =>{
    
   
   setFileList(newFileList);
    } 
  
    const [fileList, setFileList] = useState([
      {
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
    ]);
    const onChangell = ({ fileList: newFileList }) => {
      setFileList(newFileList);
    };
    const onPreview = async (file) => {
      let src = file.url;
      if (!src) {
        src = await new Promise((resolve) => {
          const reader = new FileReader();
          reader.readAsDataURL(file.originFileObj);
          reader.onload = () => resolve(reader.result);
        });
      }
      const image = new Image();
      image.src = src;
      const imgWindow = window.open(src);
      imgWindow?.document.write(image.outerHTML);
    }
  return (
    <>
      <button className={lou.new}  onClick={() => {
        setNewOpen(true)
      }}>新建楼宇</button>
      <div className={lou.box}>
        <input type="text" placeholder='请输入楼宇名称' value={searchText} onChange={(e) => setSearchText(e.target.value)} /> {/* 绑定搜索文本状态 */}
        <button className={lou.b1} onClick={()=>{
          getData(1) //点击查询按钮重新获取数据
        }}>查询</button>
        <button className={lou.b2} onClick={reset}>重置</button>
      </div>
      <div className={lou.wrap}>

        <Table
          dataSource={dataSource}
          columns={columns}

          scroll={{
            scrollToFirstRowOnChange: true,
            y: 800,
          }} />;
        <Modal width={380} footer={false} open={isdelopen} onCancel={() => {
          setIsdelopen(false)
        }} className={lou.deletemodel}>
          <div className={lou.isdel}>
            <p>此操作是不可恢复的!</p>
            <p>您确定要执行删除操作吗</p>
            <div className={lou.button1}>
              <span className={lou.dangran} onClick={() => {
                setDataSource([...list])
                setIsdelopen(false)
                message.open({
                  type: 'success',
                  content: '楼宇删除成功',
                  duration: 1
                })
              }}>确认</span>
              <span className={lou.cancel} onClick={() => {

                setIsdelopen(false)
              }}>取消</span>
            </div>
          </div>
        </Modal>

        {/* 新建楼宇modal */}
        <Modal 
        title="楼宇新建" 
        open={newOpen} 
        footer
        className={lou.newmotai}
        onCancel={()=>setNewOpen(false)} //点击叉号关闭
        width={560}
       >
        <div className={lou.step}>
        <Steps current={current} items={items} labelPlacement="vertical" />
        </div>
        {/* 基础信息 */}
        <div className={dd==0?'':lou.info}>
        <div className={lou.stepname}>
          <span className={lou.xing}>*</span>
          <span className={lou.zi}>楼宇名称</span>
        </div>
        <Input className={lou.stepipt} placeholder='请输入'/>
        <div className={lou.stepname1}>
          <span className={lou.xing}>*</span>
          <span className={lou.zi}>详细地址</span>
        </div>
        <Input className={lou.stepipt} placeholder='北京市通州'/>
        <div className={lou.stepname1}>
          <span className={lou.zi}>楼宇简介</span>
        </div>
        <Input className={lou.stepipt1}/>
        <div className={lou.stepname1}>
          <span className={lou.zi}>运营方简介</span>
        </div>
        <Input className={lou.stepipt1} />
        </div>
       
     {/* 上传图片 */}
     <div className={dd==1?'':lou.info}>
        <div className={lou.warning}>
        <img src="https://www.helloimg.com/i/2024/12/02/674d53bf62e2a.png" alt="" />
        <span>最多可上传9张,支持jpg,png,jepg格式,单张不超过2M</span>
        </div>
        <Upload
        action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
        listType="picture-card"
        fileList={fileList}
        onChange={onChange}
        onPreview={onPreview}
      >
        {fileList.length < 5 && '+ Upload'}
      </Upload>
     </div>
     {/* 楼层 */}
     <div className={dd==2?'':lou.info}>
          <div className={lou.set}>
            <p>楼层配置</p>
           <div className={lou.jiajian}>
           <div className={lou.jia}>
              地上 <div className={lou.anniu}>
              <Button className={lou.bbttnn} onClick={()=>{
              
                if(ee>=1){
                  setEe(ee-1)
                }
              }}>-</Button>
              <Input value={ee} onChange={(e)=>{setEe(e.target.value)}}/>
              <Button className={lou.bbttnn} onClick={()=>{
                setEe(ee+1)
              }}>+</Button>
              </div>
              层
            </div>
            <div className={lou.jia}>
              地上 <div className={lou.anniu}>
              <Button className={lou.bbttnn} onClick={()=>{
              
              if(ff>=1){
                setFf(ff-1)
              }
            }}>-</Button>
              <Input value={ff}  onChange={(e)=>{setFf(e.target.value)}}/>
              <Button className={lou.bbttnn} onClick={()=>{
                setFf(ff+1)
              }}>+</Button>
              </div>
              层
            </div>
           </div>
          </div>
          <div className={lou.bigdiv}>
            <div className={lou.leftdiv}>
              {aboveLook.map(item=>(
                <div className={lou.mapfor} key={item}>
                  <p>地上</p>
                  <div className={lou.ldis}><p>{item}</p>层</div>
                  <div className={lou.dwel} onClick={()=>{
                    setEe(ee-1)
                  }}><CloseOutlined/> </div>
                </div>
              ))}
            </div>
            <div className={lou.rightdiv}>
              {above.map(item=>(
                <div className={lou.mapfor} key={item}>
                  <p>地下</p>
                  <div className={lou.ldis}><p>{item}</p>层</div>
                  <div className={lou.dwel} onClick={()=>{
                    setFf(ff-1)
                  }}><CloseOutlined/> </div>
                </div>
              ))}
            </div>
          </div>
     </div>
      <div
        style={{
          marginTop: 24,
        }}
        
      >
        {current < steps.length - 1 && (
          <Button type="primary" onClick={() =>{next(); setDd(dd+1)} } style={{marginLeft:150}} >
            下一步
          </Button>
        )}
        {current === steps.length - 1 && (
          <Button type="primary" onClick={() => {message.success('Processing complete!'); setNewOpen(false)}}> 
           保存
          </Button>
        )}
        {current > 0 && (
          <Button
            style={{
              margin: '0 8px',
            }}
            onClick={() => {prev() ;setDd(dd-1)}}
          >
            上一步
          </Button>
        )}
      </div>
      </Modal>
     
      <Drawer
        title="北京国贸一期A座"
        placement={placement}
        width={720}
        onClose={onClose}
        open={open}
       
        extra={
          <Space>
             {/* <Switch checkedChildren="上架中" unCheckedChildren="下架" defaultChecked size='small' style={{marginRight:100}}/> */}
             <span  onClick={onClose} style={{color:'#8479E3'}}>
              编辑
            </span>
            <span onClick={onClose} style={{color:'#F97171'}}
            
            >删除</span>
           
          </Space>
        }
      >
        <Tabs
    onChange={onChange2}
    type="card"
   className={lou.tab}
      items={[
        {
          label:'基础信息',
          key:'1',
          children:<div>
            <div className={lou.d1}>
            <span>所属项目</span>
            <p>北京国贸项目</p>
            </div>
            <div className={lou.d1}>
            <span>项目地址</span>
            <p>北京市朝阳区长安街20号国贸大厦</p>
            </div>
            <div className={lou.d1}>
            <span>楼宇简介</span>
            <p>国贸大厦与国贸展览中心、国贸商城、中国大饭店及国贸饭店、国贸公寓共同构成总建筑面积达五十六万平方米的中国国际贸易中心。卓越的办公环境、先进的科技设施、完善的配套服务、优越的商业氛围以及丰富的物业管理经验，令国贸写字楼成为众多国内外客户理所当然的至优之选。全球财富500强中的多家企业均落定其间，图划伟业。</p>
            </div>
            <div className={lou.d1}>
            <span>楼宇简介</span>
            <p>国贸大厦与国贸展览中心、国贸商城、中国大饭店及国贸饭店、国贸公寓共同构成总建筑面积达五十六万平方米的中国国际贸易中心</p>
            </div>
            <div className={lou.i}>
              <img src="https://www.helloimg.com/i/2024/11/29/6749870bed9b3.jpg" alt="" className={lou.i1}/>
              <img src="https://www.helloimg.com/i/2024/11/29/67498765c9934.jpg" alt="" className={lou.i1}/>
            </div>
            <div className={lou.chuangjianren}>
              <span onClick={()=>{
                console.log(op);
                
              }}>创建人:李明海</span>
              <span>创建时间:2019-08-20 10:30:28</span>
            </div>
          </div>
        },
        {
          label:'楼层',
          key:'2',
          children:<div>
              <p>地上4层,地下1层</p>
             <div className={lou.all}>
             <div className={lou.louleft}>
              <div className={lou.louone}>
                <span>地上</span>
                <span>1层</span>
              </div>
              <div className={lou.louone}>
                <span>地上</span>
                <span>2层</span>
              </div>
              <div className={lou.louone}>
                <span>地上</span>
                <span>3层</span>
              </div>
              <div className={lou.louone}>
                <span>地上</span>
                <span>4层</span>
              </div>
              <div className={lou.louone}>
                <span>地上</span>
                <span>5层</span>
              </div>
              <div className={lou.louone}>
                <span>地上</span>
                <span>6层</span>
              </div>
              <div className={lou.louone}>
                <span>地上</span>
                <span>7层</span>
              </div>
              </div>
              <div className={lou.louright}>
              <div className={lou.louone}>
                <span>地下</span>
                <span>1层</span>
              </div>
              <div className={lou.louone}>
                <span>地下</span>
                <span>2层</span>
              </div>
              </div>
             </div>
             <div className={lou.chuangjianren1}>
              <span>创建人:李明海</span>
              <span>创建时间:2019-08-20 10:30:28</span>
            </div>
          </div>
        }
      ]}
  />
      </Drawer>
      </div>
    </>
  )
}
